<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <div class="flex justify-between m-8 items-center">
      <div>
        <p class="text-4xl">您好</p>
        <h2 class="text-6xl">万峰互联科技</h2>
      </div>
      <i class="iconfont icon-a-001_tongzhi text-8xl"></i>
    </div>
    <div class="mx-8">
      <custom-input />
    </div>
    <div class="py-6">
      <van-swipe class="banner" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../assets/img/1.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/img/2.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :border="false">
      <van-grid-item
        v-for="item in cfyList"
        :key="item.objectId"
        :icon="item.icon"
        :text="item.name"
      />
      <van-grid-item :icon="grid5" text="更多" />
    </van-grid>
    <div class="flex justify-between mx-8 py-6">
      <div class="text-5xl">为你推荐</div>
      <span class="text-3xl text-orange-500">查看更多</span>
    </div>
    <div class="suggest mt-7" ref="wrapper">
      <div
        class="content flex"
        ref="content"
        :style="{ width: `${contWidth}rem` }"
      >
        <job-item v-for="item in jobList" :jobdata="item" />
      </div>
    </div>
    <div class="line">
      <div class="dot" :style="{ transform: `translateX(${move}px)` }"></div>
    </div>
    <div class="flex justify-between m-8 py-6">
      <div class="text-5xl">最新职位</div>
      <span class="text-3xl text-orange-500">查看更多</span>
    </div>
    <div class="flex flex-wrap justify-evenly mt-7">
      <job-item v-for="item in jobList" :jobdata="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from "vue";
import { classifyGet, jobGet } from "../api/pro";
import { ClassifyType, JobType } from "../types/pro";
import grid5 from "../assets/img/home_grid5.png";
import BScroll from "@better-scroll/core";

const cfyList = ref<Array<ClassifyType>>([]);
classifyGet().then((res) => {
  cfyList.value = res.data.results;
  console.log("组件请求结果", res);
});

//岗位列表
const jobList = ref<JobType[]>([]);
const wrapper = ref(); //获取滚动容器DOM
const content = ref(); //获取滚动内容DOM
const move = ref<number>(0); //指示器的实时滚动距离
jobGet().then((res) => {
  console.log(res);
  jobList.value = res.data.results;
  nextTick(() => {
    let wrapWidth = wrapper.value.offsetWidth;
    let contWidth = content.value.offsetWidth;
    let maxScroll = contWidth - wrapWidth; //滚动区域的最大滚动距离
    console.log("最大滚动距离", maxScroll);

    let bs = new BScroll(".suggest", {
      // ...... 详见配置项
      scrollX: true, //开启横向滚动
      probeType: 3, //开启滚动监听
      click: true, //开启点击
    });
    bs.on("scroll", (position: any) => {
      // console.log(position);
      let scrollX = position.x; //滚动区域的实时滚动距离
      move.value = -(scrollX / maxScroll) * 180;
    });
  });
});

//左右滑动
let contWidth = computed(() => {
  return jobList.value.length * 36.6;
});
</script>

<style lang="scss" scoped>
.grid-icon {
  /* width: 12.8rem; */
  height: 6.4rem;
}
.banner {
  height: 32rem;
  width: 71rem;
  margin: auto;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.suggest {
  width: 100%;
  overflow: hidden;
}
.line {
  width: 200px;
  height: 3px;
  background-color: #d8d8d8;
  margin: auto;
  overflow: hidden;
  border-radius: 4px;
  .dot {
    height: 3px;
    width: 20px;
    background-color: orange;
    border-radius: 4px;
  }
}
.content {
  .job-item {
    margin-right: 2rem;
  }
}
</style>
